<template>
    <Modal v-model:visible="isShowModal" :title="`${editId ? '编辑' : '添加'}企业`" @ok="handleOk" @cancel="handleCancel"
        ok-text="提交" cancel-text="取消" :loading="loading">
        <Form :model="formState" ref="formRef" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" :rules="rules">
            <FormItem label="企业名称" name="fullName">
                <Input v-model:value="formState.fullName" placeholder="请输入企业名称" allowClear></Input>
            </FormItem>
            <FormItem label="企业简称" name="name">
                <Input v-model:value="formState.name" placeholder="请输入企业简称" allowClear></Input>
            </FormItem>
            <FormItem label="信用代码" name="usci">
                <Input v-model:value="formState.usci" placeholder="请输入信用代码" allowClear></Input>
            </FormItem>
            <FormItem label="审核状态" name="state">
                <Select v-model:value="formState.state" placeholder="请选择审核状态">
                    <Option v-for="item in stateOption" :value="item.value" :key="item.value">{{ item.label }} </Option>
                </Select>
            </FormItem>
        </Form>
    </Modal>
</template>

<script lang="ts" setup>
import { Modal, Form, Input, message, Select } from 'ant-design-vue'
import { Rule } from 'ant-design-vue/es/form';
import { CompanyApi, CompanyEditRequest, EnumCompanyState, CompanyQueryResult } from '@/api';
import { convertEnumToOptions } from '@/utils/queryConversion';

const FormItem = Form.Item;
const Option = Select.Option;

const emit = defineEmits(['ok']);

const isShowModal = ref(false)
const loading = ref(false)
const editId = ref<number>();
const formState = ref<CompanyEditRequest>({
    name: '',
    fullName: '',
    usci: '',
    state: 1,
})
const formRef = ref()
const rules: Record<string, Rule[]> = {
    fullName: [{ required: true, message: "请输入企业名称", trigger: 'blur' }],
    name: [{ required: true, message: "请输入企业简称", trigger: 'blur' }],
    usci: [{ required: true, message: "请输入信用代码", trigger: 'blur' }],
};

const stateOption = convertEnumToOptions(EnumCompanyState)
const handleOpen = (data: CompanyQueryResult) => {
    if (data) {
        editId.value = data.id;
        formState.value = {
            name: data.name!,
            fullName: data.fullName!,
            usci: data.usci!,
            state: data.state,
        }
    } else {
        handleEmpty();
    }
    isShowModal.value = true;
}

const handleOk = () => {
    loading.value = true;
    formRef.value
        .validate()
        .then(async () => {
            if (editId.value) {
                await CompanyApi.companyCompanyedit(editId.value.toString(), formState.value)
                message.success('修改成功')
            } else {
                await CompanyApi.companyCompanyadd(formState.value)
                message.success('添加成功')
            }
            emit('ok')
            handleClose();
        })
        .catch((err: any) => {
            console.log('校验失败', err);
        }).finally(() => {
            loading.value = false;
        });
}

const handleEmpty = () => {
    editId.value = undefined;
    formState.value = {
        name: '',
        fullName: '',
        usci: '',
        state: 1,
    };
}

function handleClose() {
    isShowModal.value = false;
}

function handleCancel() {
    handleEmpty();
    handleClose();
}

defineExpose({ handleOpen })
</script>